<template>
    <view class="nav-bottom">
      <image class="my-bg" src="../../assets/images/bottom.png"></image>
      <view class="nav-left nav-box" @click="navTo(0)" data-active="0">
        <image v-if="active == 0" src="../../assets/svg/bottom-1-a.svg" mode="aspectFit" ></image>
        <image v-else src="../../assets/svg/bottom-1.svg" mode="aspectFit" ></image>
        <view style="active == 0 ? 'color:#f6736e;' : ''">商城</view>
      </view>
      <view class="nav-center"  @click="navTo(1)">
        <image v-if="active == 1" src="../../assets/svg/bottom-2-a.svg" mode="aspectFit" ></image>
        <image v-else src="../../assets/svg/bottom-2.svg" mode="aspectFit" ></image>
        <view style="active == 1 ? 'color:#f6736e;' : ''">智控台</view>
      </view>
      <view class="nav-right nav-box" @click="navTo(2)" >
        <image v-if="active == 2" src="../../assets/svg/bottom-3-a.svg" mode="aspectFit" ></image>
        <image v-else src="../../assets/svg/bottom-3.svg" mode="aspectFit" ></image>
        <view style="active == 2 ? 'color:#f6736e;' : ''">我的</view>
      </view>
    </view>
</template>
<script>
export default{
	props:['active'],
	data(){
		return {}
	},
	methods:{
		navTo(index){
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route // 获取当前页面路由，也就是最后一个打开的页面路由
			console.log(curRoute)
			if(index == 0 && !curRoute.includes('pages/full-web/full-web')){
				uni.navigateTo({
					url:'/pages/full-web/full-web'
				})
			}
			if(index == 1 && !curRoute.includes('pages/home/home')){
				uni.navigateTo({
					url:'/pages/home/home'
				})
			}
			if(index == 2 && !curRoute.includes('pages/user/user')){
				uni.navigateTo({
					url:'/pages/user/user'
				})
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.nav-bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 192rpx;
  /* background:red; */

  font-size: 20rpx;
  color: #666;
  z-index: 500;
}
.my-bg{
  width: 106%;
  height: 120%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.nav-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.nav-box image{
  width: 68rpx;
  height: 64rpx;
}
.nav-left{
  position: absolute;
  left: 86rpx;
  top: 60rpx;
}

.nav-right{
  position: absolute;
  right: 86rpx;
  top: 60rpx;
}

.nav-center{
  position: absolute;
  top: 6rpx;
  left: 50%;
  transform: translate(-50%,0);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.nav-center image{
  width: 130rpx;
  height: 130rpx;
}
.nav-center >view{
  margin-top: -14rpx;
}
</style>